<template>
  <div class="description">
    <div class="tinymce">
      <editor id="tinymce" v-model="tinymceHtml" :init="init"></editor>
      <!-- <div v-html='tinymceHtml'></div> -->
    </div>
    <div class="operate">
      <el-button>保存</el-button>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import tinymce from "tinymce/tinymce";
import "tinymce/themes/silver/theme";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "../../../static/tinymce/skins/ui/oxide/skin.css";
import axios from "axios";

export default {
  name: "tinymce",
  data() {
    return {
      tinymceHtml: "请输入内容",
      init: {
        language_url: "/static//tinymce/zh_CN.js",
        language: "zh_CN",
        height: 300,
        plugins:
          "link lists image code table colorpicker textcolor wordcount contextmenu",
        toolbar:
          "bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat",
        branding: false,
        images_upload_handler: function(blobInfo, success, failure) {
          let formdata = new FormData();
          formdata.set("upload_file", blobInfo.blob());
          console.log(blobInfo.blob());
          axios
            .post("/api/upload", formdata)
            .then(res => {
              success(res.data.data.src);
            })
            .catch(res => {
              failure("error");
            });
          //            success('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3187738279,2985933781&fm=26&gp=0.jpg')
        }
      }
    };
  },
  mounted() {
    tinymce.init({});
  },
  components: { Editor },
  methods: {}
};
</script>

<style>
.tinymce {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  /* width: 500px; */
  height: auto;
  /* -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; */
  /* box-sizing: border-box; */
}
.operate {
  display: flex;
  justify-content: center;
}
</style>
